<template>
  <div>
    <top-bar :title="topTitle"></top-bar>
    <div class="vaccine-details-wrapper">
      <div class="vaccine-info">
        <img src="../../../static/images/home/vaccine-zhen.png" class="vaccine-zhen">
        <div>
          <h4 class="title">
            {{vaccineInfo.vaccinename}}
            <!--<div class="unauthorized-box">
              <img src="../../../static/images/record/unauthorized.png" class="unauthorized-pic">
              <span class="unauthorized-text">未认证</span>
            </div>-->
          </h4>
          <div class="dose-con">
            <span>(第{{vaccineInfo.dose}}剂/共{{vaccineInfo.totaldose}}剂)</span>
            <span class="attribute" v-if="vaccineInfo.type==1">属性:一类</span>
            <span class="attribute" v-else>属性:二类</span>
          </div>
          <div class="label">
            <!-- 判断是否免费 false免费true自费-->
            <span v-if="vaccineInfo.ispay==0">自费</span>
            <span v-else>免费</span>
            <!--canselect 0必打，2替代，1自选-->
            <span v-if="vaccineInfo.canselect==0">必打</span>
            <span v-else-if="vaccineInfo.canselect==1">自选</span>
            <span v-else-if="vaccineInfo.canselect==2">替代</span>
          </div>
        </div>
      </div>


      <div class="route-con" v-if="vaccineSourceList.length>0">
        <h4>疫苗溯源路径 </h4>
        <div class="list">
          <div class="li" v-for="(item,index) in vaccineSourceList" :key="index" :class="index==vaccineSourceListLength-1?'lastLI':''">
            <span class="l" v-if="index==0" >
              <img src="../../../static/images/home/01.png" width="24" height="24">
            </span>
            <span class="l" v-else-if="index==vaccineSourceListLength-1" >
               <img src="../../../static/images/home/02.png" width="24" height="24">
            </span>
            <span class="l" v-else>
              <img src="../../../static/images/home/03.png" width="24" height="24">
            </span>
            <div>
              <p class="title"><span class="dot"></span>{{item.storeName}}</p>
              <p class="time">发货时间：{{item.formTime}}</p>
            </div>
          </div>
        </div>
      </div>

      <!--<div class="vaccine-record">
        <h4>接种记录</h4>
        <div><span>接种时间：</span>2019.04.30</div>
        <div><span>接种地点：</span>高新区中和街道卫生点</div>
        <div class="doctor"><span>接种医生：</span>王爱梅</div>
        <div><span>疫苗批号：</span>232424245536343535</div>
        <div><span>疫苗厂家：</span>成都市高科技疫苗接种中心</div>
        <div><span>疫苗效期：</span>2019.09.22</div>
        <div><span>接种部位：</span>右上臂</div>
        <div><span>流转路径：</span>直采</div>
      </div>-->

      <div class="info-box">
        <div class="vaccine-title">疫苗信息</div>
        <div class="group">
          <h4> <img src="../../../static/images/home/vaccine-name.png">疫苗名称</h4>
          <p>{{vaccineInfo.vaccinename}}</p>
        </div>
        <div class="group">
          <h4><img src="../../../static/images/home/vaccine-object.png">接种对象</h4>
          <p>{{vaccineInfo.object}}</p>
        </div>
        <div class="group">
          <h4><img src="../../../static/images/home/vaccine-use.png">使用用途</h4>
          <p>{{vaccineInfo.role}}</p>
        </div>
        <div class="group">
          <h4><img src="../../../static/images/home/vaccine-bad.png">不良反应</h4>
          <p>{{vaccineInfo.reaction}}</p>
        </div>
        <div class="group group-taboo">
          <h4><img src="../../../static/images/home/vaccine-taboo.png">禁忌</h4>
          <p>{{vaccineInfo.taboo}}</p>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
  import TopBar from '@/components/top'
    export default {
      metaInfo () {
        return {
          title: '疫苗详情'
        }
      },
      data(){
        return {
          topTitle:'疫苗详情',
          vaccinecoding:this.$route.query.vaccinecoding,
          vaccineInfo:{},

          vaccineSourceList:[],
          vaccineSourceListLength:null,
        }
      },
      mounted(){
        this.getData();
      },
      computed:{
        isbyhand(){
          return this.$route.query.isbyhand
        },
        vaccineCodes(){
          return this.$route.query.vaccineCodes
        }
      },
      methods:{
        getData(){
          this.$api.post('/vaccinationReservation/findVaccInfo',{
            vaccinecoding: this.vaccinecoding
          }).then( (res)=> {
            if(res.data.result==0){
              this.vaccineInfo=res.data.obj;
            }
          })

          //isbyhand为0是系统接种，为1表示手动添加
          if(this.isbyhand==0){
            this.$api.get(`/vaccinationReservation/vaccineSourcePath/${this.vaccineCodes}`).then( (res)=> {
              if(res.data.result==0){
                this.vaccineSourceList=res.data.obj;
                this.vaccineSourceListLength=res.data.obj.length;
              }
            })
          }


        }
      },
      components: {
        TopBar
      },
      beforeRouteLeave(to, from, next) {
        // 设置下一个路由的 meta
        to.meta.keepAlive = true;  // B 跳转到 A 时，让 A 缓存，即不刷新
        next();
      }
    }
</script>

<style lang="scss">
  .vaccine-details-wrapper{
    background: #F56363;
    padding:10px 15px 30px;
    .vaccine-info{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
      border-radius:10px;
      margin:20px 0 10px;
      padding:15px;
      display: flex;
      .vaccine-zhen{
        width:34px;
        height:34px;
        flex: 0 0 34px;
        margin-right: 5px;
      }
      .title{
        font-size:15px;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(38,38,38,1);
        .vaccine-zhen{
          width:34px;
          height: 34px;
          vertical-align: middle;
        }
        .unauthorized-box{
          position: relative;
          display: inline-block;
          vertical-align: middle;
          .unauthorized-pic{
            width:58px;
            height: 22px;
          }
          .unauthorized-text{
            position: absolute;
            left:10px;
            top:4px;
            font-size:12px;
            font-weight:400;
            color:rgba(255,255,255,1);
          }
        }
      }
      .dose-con{
        font-size:12px;
        font-family:PingFang-SC-Regular;
        font-weight:bold;
        color:rgba(122,122,122,1);
        margin-top:10px;
        text-align: left;
        .attribute{
          margin-left:10px;
        }
      }
      .label{
        margin-top:10px;
        span{
          width:39px;
          height:17px;
          line-height: 17px;
          background:rgba(105,129,150,1);
          font-size:12px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(255,255,255,1);
          display: inline-block;
          text-align: center;
        }
      }
    }
    .vaccine-record{
      background: #fff;
      padding:15px;
      margin-bottom: 10px;
      box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
      border-radius:10px;
      h4{
        font-size:15px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(38,38,38,1);
        height:14px;
        line-height: 14px;
        border-left:4px solid #F56363;
        padding-left:4px;
        margin-bottom: 14px;
      }
      div{
        height:15px;
        font-size:15px;
        font-family:PingFang-SC-Regular;
        font-weight:normal;
        color:#262626;
        margin-bottom: 12px;
        &.doctor{
          border-bottom: 1px solid #EEEEEE;
          margin-bottom: 20px;
          padding-bottom: 20px;
        }
        .dot{
          color:#7A7A7A;
        }
      }
    }
    .info-box{
      background:rgba(255,255,255,1);
      box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
      border-radius:10px;
      padding:15px;
      .vaccine-title{
        background: url('../../../static/images/home/vaccine-title-bg.png') no-repeat;
        background-size: 100% 100%;
        width:133px;
        height:34px;
        line-height: 34px;
        text-align: center;
        font-size:15px;
        font-family:PingFang-SC-Bold;
        font-weight:normal;
        color:rgba(255,255,255,1);
        padding-left:20px;
        margin: 0 auto 16px;
      }
      .group{
        border-bottom: 1px solid #DCDCDC;
        padding-bottom: 15px;
        margin-bottom: 15px;
        img{
          width:15px;
          height: 15px;
          vertical-align: middle;
          margin-right: 4px;
        }
        h4{
          font-size:15px;
          font-family:PingFang-SC-Bold;
          font-weight:bold;
          color:rgba(217,69,45,1);
          margin-bottom: 14px;
        }
        p{
          font-size:15px;
          font-family:PingFang-SC-Regular;
          font-weight:400;
          color:rgba(38,38,38,1);
          line-height:23px;
        }
        &-taboo{
          border-bottom:none;
        }
      }
    }
    .route-con{
      background: #fff;
      padding:15px;
      margin-bottom: 10px;
      box-shadow:0px 0px 10px 1px rgba(50,51,51,0.06);
      border-radius:10px;
      h4{
        font-size:15px;
        font-family:PingFang-SC-Regular;
        font-weight:400;
        color:rgba(38,38,38,1);
        height:14px;
        line-height: 14px;
        border-left:4px solid #F56363;
        padding-left:4px;
        margin-bottom: 14px;
      }
      .list{
        position: relative;
        .li{
          position: relative;
          &:before{
            content: '';
            position: absolute;
            left: 5px;
            top: 50px;
            z-index: 0;
            width: 1px;
            height: 100%;
            background-color: #e6e6e6;
            display: block;
          }
          &.lastLI{
            &:before{
              content: '';
              position: absolute;
              left: 5px;
              top: 50px;
              z-index: 0;
              width: 1px;
              height: 0;
              background-color: #e6e6e6;
              display: block;
            }
          }
          .l{
            background-size: 100% 100%;
            width:24px;
            height: 24px;
            display: inline-block;
            position: absolute;
            left: -5px;
            top: 26px;
          }
          div{
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 5px 0px rgba(197,197,197,0.6);
            border-radius:5px;
            padding:15px 20px;
            margin-bottom: 13px;
            margin-left: 26px;
          }
          .dot{
            display: inline-block;
            width:5px;
            height:5px;
            background:rgba(245,99,99,1);
            border-radius:2px;
            vertical-align: middle;
            margin-right: 5px;
          }
          .title{
            font-size:14px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(51,51,51,1);
            margin-bottom: 13px;
          }
          .time{
            font-size:12px;
            font-family:PingFang SC;
            font-weight:500;
            color:rgba(102,102,102,1);
            padding-left:10px;
          }
        }
      }
    }
  }

</style>
